<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>京苏易购电子商务</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="../../adminlte/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="../../adminlte/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="../../adminlte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../adminlte/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="../adminlte/css/SourceSans.css">
</head>


<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="../index3.html" class="brand-link">
            <img src="../adminlte/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">帷易胜(JD)商品管理</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">


            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->

                    <li class="nav-item active">
                        <a href="../brand" class="nav-link ">
                            <!--<i class="nav-icon fas fa-th"></i>-->
                            <p>
                                京东授权品牌
                            </p>
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="../category" class="nav-link">
                            <!--<i class="nav-icon fas fa-th"></i>-->
                            <p>
                                京东授权类目
                            </p>
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="../task" class="nav-link">
                            <!--<i class="nav-icon fas fa-th"></i>-->
                            <p>
                                采集任务
                            </p>
                        </a>
                    </li>


                    <li class="nav-item" >
                        <a href="../item" class="nav-link" >
                            <!--<i class="nav-icon fas fa-th"></i>-->
                            <p>
                                SKU商品
                            </p>
                        </a>
                    </li>

                    <li class="nav-item active">
                        <a href="../productapply" class="nav-link">
                            <!--<i class="nav-icon fas fa-th"></i>-->
                            <p>
                                申请商品列表
                            </p>
                        </a>
                    </li>

                    <li class="nav-item active">
                        <a href="../productcreate" class="nav-link active">
                            <!--<i class="nav-icon fas fa-th"></i>-->
                            <p>
                                商品上架任务
                            </p>
                        </a>
                    </li>

                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="../#">主页</a></li>
                            <li class="breadcrumb-item"><a href="../productcreate">上架任务</a></li>
                            <li class="breadcrumb-item active"><span th:text="*{product.name}"></span></li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <!-- /.card-header -->
                            <div class="card-body">



                                <form id="frm1"  class="form-horizontal" action="update" method="post" >

                                    <input type="hidden" class="form-control" name="id" th:value="${product.id}">
                                    <input type="hidden" class="form-control" name="taskid" th:value="${product.taskid}">
                                    <input type="hidden" class="form-control" name="originalCategory" th:value="${product.originalCategory}">

                                    <div class="card-body">
                                        <div class="form-group row">
                                            <label  class="col-sm-2 col-form-label">商品名称: </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="name" placeholder="商品名称" th:value="${product.name}">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label  class="col-sm-2 col-form-label">商品品牌: </label>
                                            <div class="col-sm-2">
                                                <input type="text" class="form-control" style="background-color: #e9ecef;" name="originalBrand" placeholder="商品品牌" th:value="${product.originalBrand}" readonly="readonly">
                                            </div>
                                            <label  class="col-sm-2 col-form-label">商品类目: </label>
                                            <div class="col-sm-2">
                                                <input type="text" class="form-control" style="background-color: #e9ecef;" name="originalCategoryDesc" placeholder="商品类目" th:value="${product.originalCategoryDesc}" readonly="readonly">
                                            </div>
                                            <label  class="col-sm-2 col-form-label"><a th:href="'https://www.mymro.cn/g-' + ${product.originalCode} + '.html'" target="_blank">商家编码</a>: </label>
                                            <div class="col-sm-2">
                                                <input type="text" class="form-control" style="background-color: #e9ecef;" name="originalCode" placeholder="商家编码" th:value="${product.originalCode}" readonly="readonly">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label">商品型号: </label>
                                            <div class="col-sm-2">
                                                <input type="text" class="form-control" name="model" placeholder="商品型号" th:value="${product.model}">
                                            </div>

                                            <label class="col-sm-2 col-form-label">上架类目: </label>
                                            <div class="col-sm-2">
                                                <select class="select2 form-control" th:name="cid1" id="cateSelect2">
                                                    <option value=""></option>
                                                    <option th:each = "category,stat:${categories}" th:value="${category.id}"  th:text="${category.name}"   th:selected="(${category.id} == *{product.cid1})"  >option 1</option>
                                                </select>
                                            </div>
                                            <label class="col-sm-2 col-form-label">上架品牌: </label>
                                            <div class="col-sm-2">
                                                <select class="select2 form-control" th:name="brandid" id="brandSelect2">
                                                    <option value=""></option>
                                                </select>
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label">产地: </label>
                                            <div class="col-sm-2">
                                                <input type="text" class="form-control" name="originalplace" placeholder="产地" th:value="${product.originalplace}">
                                            </div>

                                            <label class="col-sm-2 col-form-label">质保期: </label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="warranty" placeholder="质保期" th:value="${product.warranty}">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label">销售员: </label>
                                            <div class="col-sm-2">
                                                <input type="text" class="form-control" name="salercode" placeholder="销售员" th:value="${product.salercode}">
                                            </div>

                                            <label class="col-sm-2 col-form-label">采购员: </label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="purchasercode" placeholder="采购员" th:value="${product.purchasercode}">
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label">包装规格: </label>
                                            <div class="col-sm-2">
                                                <input type="text" class="form-control" name="packing" placeholder="包装规格（[1×N]请填写N的值）" th:value="${product.packing}">
                                            </div>

                                            <label class="col-sm-2 col-form-label">特殊属性: </label>
                                            <div class="col-sm-2">
                                                <input type="text" class="form-control" name="packtype" placeholder="特殊属性（1:普通商品，2:易碎品，3:裸装液体，4:带包装液体，5:按原包装出库）" th:value="${product.packtype}">
                                            </div>

                                            <label class="col-sm-2 col-form-label">销售单位: </label>
                                            <div class="col-sm-2">
                                                <input type="text" class="form-control" name="skuunit" placeholder="销售单位" th:value="${product.skuunit}">
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label">包装清单: </label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" name="pkginfo" placeholder="包装清单（格式：USB线 × 1、AV线 × 1、配带 × 1、说明书 × 1、保修卡 × 1 ，最多可录入20000个字符）" th:value="${product.pkginfo}">
                                            </div>
                                        </div>





                                        <div class="card card-info" th:if="${not #lists.isEmpty(props)}">
                                            <div class="card-header">
                                                <h3 class="card-title">规格属性</h3>
                                            </div>
                                            <!-- /.card-header -->
                                            <!-- form start -->
                                            <form class="form-horizontal">
                                                <div class="card-body">

                                                    <div class="form-group row" th:each = "prop,stat:${props}">
                                                        <label class="col-sm-2 col-form-label"  ><span  th:if="${#strings.equalsIgnoreCase(prop.required,'true')}" style="color: red;">*</span><span th:text="${prop.propname}"></span></label>

                                                        <div class="col-sm-10" th:if="${#strings.equalsIgnoreCase(prop.type, '1')}">
                                                            <select class="select2 form-control" th:name="${prop.propid}" th:value="${prop.propvid}">
                                                                <option th:each = "option,stat:${prop.options}" th:value="${option.valueId}"  th:text="${option.valueName}"   th:selected="(${option.valueId} == *{prop.propvid})"  >option 1</option>
                                                            </select>

                                                        </div>


                                                        <div class="col-sm-10" th:if="${#strings.equalsIgnoreCase(prop.type, '2')}">
                                                            <select class="select2 form-control" th:name="${prop.propid}" th:value="${prop.propvalues}">
                                                                <option th:each = "option,stat:${prop.options}" th:value="${option.valueId}"  th:text="${option.valueName}" th:selected="(${option.valueId} == *{prop.propvalues})" >option 1</option>
                                                            </select>

                                                        </div>

                                                        <div class="col-sm-10" th:if="${#strings.equalsIgnoreCase(prop.type, '3')}">
                                                            <input type="text" class="form-control" th:name="${prop.propid}" th:placeholder="${prop.propname}" th:value="${prop.propremark}">
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>


                                        <div class="card card-info"  th:if="${not #lists.isEmpty(extProps)}">
                                            <div class="card-header">
                                                <h3 class="card-title">扩展属性</h3>
                                            </div>

                                            <div class="card-body">

                                                <div class="form-group row" th:each = "extProp,stat:${extProps}">
                                                    <label class="col-sm-2 col-form-label"  th:text="${extProp.propname}">Email</label>
                                                    <div class="col-sm-10" th:if="${#strings.equalsIgnoreCase(extProp.type, '1')}">
                                                        <select class="select2 form-control" th:name="${extProp.propid}" th:value="${extProp.extvalue}">
                                                            <option th:each = "option,stat:${extProp.options}" th:value="${option.valueId}"  th:text="${option.valueName}"   th:selected="(${option.valueId} == *{extProp.extvalue})"  >option 1</option>
                                                        </select>

                                                    </div>
                                                    <div class="col-sm-10" th:if="${#strings.equalsIgnoreCase(extProp.type, '2')}">
                                                        <select class="select2 form-control" th:name="${extProp.propid}" th:value="${extProp.extvalue}">
                                                            <option th:each = "option,stat:${extProp.options}" th:value="${option.valueId}"  th:text="${option.valueName}"   th:selected="(${option.valueId} == *{extProp.extvalue})"  >option 1</option>
                                                        </select>
                                                    </div>

                                                    <div class="col-sm-10" th:if="${#strings.equalsIgnoreCase(extProp.type, '3')}">
                                                        <input type="text3" class="form-control" th:name="${extProp.propid}" th:placeholder="${extProp.propname}" th:value="${extProp.extremark}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>


                                        <!--<div class="card card-info"  th:if="${not #lists.isEmpty(saleProps)}">-->
                                            <!--<div class="card-header">-->
                                                <!--<h3 class="card-title">销售属性</h3>-->
                                            <!--</div>-->
                                            <!--&lt;!&ndash; /.card-header &ndash;&gt;-->
                                            <!--&lt;!&ndash; form start &ndash;&gt;-->
                                            <!--<form class="form-horizontal">-->
                                                <!--<div class="card-body">-->

                                                    <!--<div class="form-group row" th:each = "saleProp,stat:${saleProps}">-->
                                                        <!--<label class="col-sm-2 col-form-label"  th:text="${saleProp.name}">Email</label>-->
                                                        <!--<div class="col-sm-10">-->
                                                            <!--<input type="text" class="form-control" th:name="'sale[' + ${saleProp.dim} + ']'" th:placeholder="${saleProp.dim}">-->
                                                        <!--</div>-->
                                                    <!--</div>-->
                                                <!--</div>-->
                                            <!--</form>-->
                                        <!--</div>-->

                                        <table class="table table-bordered" id="skuTable">
                                            <thead>
                                            <tr>
                                                <th></th>
                                                <th>ID</th>
                                                <th>SKU名称</th>
                                                <th th:if="not ${#strings.isEmpty(dim1name)}" th:text="${dim1name}">DIM1</th>
                                                <th th:if="not ${#strings.isEmpty(dim1name)}" th:text="${dim1name} + '顺序'">DIM1顺序</th>
                                                <th th:if="not ${#strings.isEmpty(dim2name)}" th:text="${dim2name}">DIM2</th>
                                                <th th:if="not ${#strings.isEmpty(dim2name)}" th:text="${dim2name} + '顺序'">DIM2顺序</th>
                                                <th>市场价</th>
                                                <th>供货价</th>
                                                <th>京东价</th>
                                                <th>重量(KG)</th>
                                                <th>长(mm)</th>
                                                <th>宽(mm)</th>
                                                <th>高(mm)</th>
                                                <th>货号</th>
                                                <th>商家编码</th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            <tr th:each = "item,stat:${items}">
                                                <td th:text="${stat.count}">1</td>
                                                <td th:text="${item.id}">SKU名称</td>
                                                <td th:text="${item.skuName}">SKU名称</td>
                                                <td th:if="not ${#strings.isEmpty(dim1name)}" th:text="${item.dim1Val}">DIM1</td>
                                                <td th:if="not ${#strings.isEmpty(dim1name)}" th:text="${item.dim1Sort}">DIM1</td>
                                                <td th:if="not ${#strings.isEmpty(dim2name)}" th:text="${item.dim2Val}">DIM2</td>
                                                <td th:if="not ${#strings.isEmpty(dim2name)}" th:text="${item.dim2Sort}">DIM2</td>
                                                <td th:text="${item.marketPrice}">市场价</td>
                                                <td th:text="${item.purchasePrice}">供货价</td>
                                                <td th:text="${item.memberPrice}">京东价</td>
                                                <td th:text="${item.weight}">重量</td>
                                                <td th:text="${item.length}">长</td>
                                                <td th:text="${item.width}">宽</td>
                                                <td th:text="${item.height}">高</td>
                                                <td th:text="${item.itemNum}">货号</td>
                                                <td ><a target="_blank" th:href="'https://www.mymro.cn/u-' + ${item.originalCode} + '.html'" th:text="${item.originalCode}"></a></td>



                                            </tr>
                                            </tbody>
                                        </table>




                                    </div>
                                    <!-- /.card-body -->
                                    <div class="card-footer">
                                        <button type="reset" class="btn btn-default"> < 返 回</button>
                                        <button type="button" class="btn btn-info float-right" onclick="formSubmit()">提 交</button>
                                    </div>
                                    <!-- /.card-footer -->
                                </form>

                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>


    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>

    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="../adminlte/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="../adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="../adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="../adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="../adminlte/plugins/select2/js/select2.full.min.js"></script>

<script src="../js/dataTables.cellEdit.js"></script>
<!-- page script -->
<script>


    function serializeObject($form){
        var o = {};
        var a = $form.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    var table = null;

    function formSubmit()
    {
        var datas = [];

        var table =  $("#skuTable").dataTable();
        table.$('tr').each( function () {
            var data = table.fnGetData( this );
            datas.push(data);
        });

        var product = serializeObject($("#frm1"));

        var params = {
            product: product,
            props: product,
            items: datas
        };

        debugger;

        $.ajax({
            type: "POST",
            url: "update",
            dataType: 'json',
            contentType: 'application/json',
            data:JSON.stringify(params),
            async: false,
            error: function(request) {
                alert("Connection error");
            },
            success: function(data) {
                if ( !!data.success ) {
                    alert("更新成功");
                    window.location.reload();
                } else {
                    alert( data["msg"] || "更新失败!");
                }
            }
        });
    }



    $(document).ready(function (){

        $('.select2').select2();

        var table = $("#skuTable").DataTable({
            "bPaginate": false, //翻页功能
            "bFilter": false, //过滤功能
            "columnDefs": [
                {
                    "targets": [ 1 ],
                    "visible": false
                }
            ],
            "columns": [
                { "data": "xh" },
                { "data": "id" },
                { "data": "skuName" },
                { "data": "dim1Val" },
                { "data": "dim1Sort" },
                { "data": "dim2Val" },
                { "data": "dim2Sort" },
                { "data": "marketPrice" },
                { "data": "purchasePrice" },
                { "data": "memberPrice" },
                { "data": "weight" },
                { "data": "length" },
                { "data": "width" },
                { "data": "height" },
                { "data": "itemNum" },
                { "data": "" }
            ]
        });

        table.MakeCellsEditable({
            "onUpdate": myCallbackFunction
        });

        function myCallbackFunction(updatedCell, updatedRow, oldValue) {
            console.log("The new value for the cell is: " + updatedCell.data());
            console.log("The old value for that cell was: " + oldValue);
            console.log("The values for each cell in that row are: " + updatedRow.data());
        }


        $("#cateSelect2").on("select2:select", function (e) {
            var cateId = $("#cateSelect2").val();
            selectBarnd(cateId);
        });

        //取对应的第二层数据
        function selectBarnd(cateId){


            var params = {
                start: 0,
                cateid: cateId,
                brandid: ""
            };

            $.ajax({
                type: "GET",
                url: "../catebrand/query",
                contentType: 'application/json',
                data: params,
                async: false,
                error: function(request) {
                    alert("Connection error");
                },
                success: function(data) {
                   debugger;
                    select2Show("#brandSelect2", data["data"]);
                }
            });
        }

        function select2Show(id, result){

            $(id).empty();

            if(result.length!=0){
                var data=[];

                for ( var i = 0; i < result.length; i++) {
                    var tmp = {};
                    tmp["id"] = result[i].brandid;
                    tmp["text"] = result[i].name;
                    data.push(tmp);
                }
                $(id).select2({
                    data : data
                });
            }
        }


    });
</script>
</body>
</html>
